<template>
    <div class="demo-page-basic-jsxDemo">
        <div class="author-demo">
            <div>作者：黄彪</div>
            <div>日期：2017/11/02</div>
        </div>
        <Table border :columns="columns7" :data="data6"></Table>

        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
            export default {
        data () {
            return {
                columns7: [
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                    {
                        title: 'JSX',
                        key: 'address',
                        render: (h, params) => {
                            console.dir(params)
                            let aaa = false;

                            if (aaa) {
                                return (
                                    &lt;button> sdfadsfdsa &lt;/button>
                            )
                            } else {
                                return (
                                    &lt;div>
                                        &lt;i-button type="primary"> {this.buttonName} &lt;/i-button>
                                        &lt;br/>
                                        &lt;dropdown on-on-click={this.test}>
                                             &lt;a href="javascript:void(0)">
                                                下拉菜单
                                                &lt;icon type="arrow-down-b">&lt;/icon>
                                            &lt;/a>
                                            &lt;dropdown-menu slot="list">
                                                &lt;dropdown-item>驴打滚&lt;/dropdown-item>
                                                &lt;dropdown-item>炸酱面&lt;/dropdown-item>
                                                &lt;dropdown-item disabled>豆汁儿&lt;/dropdown-item>
                                                &lt;dropdown-item>冰糖葫芦&lt;/dropdown-item>
                                                &lt;dropdown-item divided>北京烤鸭&lt;/dropdown-item>
                                            &lt;/dropdown-menu>
                                        &lt;/dropdown>
                                &lt;/div>
                            )
                            }
                        }
                    },
                ],
                data6: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ],
                buttonName:"我是btn名字"
            }
        },
        methods: {
            ......
        }
    }
            </code>
        </pre>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

    </div>

</template>
<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-page-basic-jsxDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 600);
        },
        data () {
            return {
                columns7: [
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                    {
                        title: 'JSX',
                        key: 'address',
                        render: (h, params) => {
                            console.dir(params)
                            let aaa = false;

                            if (aaa) {
                                return (
                                    <button> sdfadsfdsa </button>
                            )
                            } else {
                                return (
                                    <div>
                                        <i-button type="primary"> {this.buttonName} </i-button>
                                        <br/>
                                        <dropdown on-on-click={this.test}>
                                             <a href="javascript:void(0)">
                                                下拉菜单
                                                <icon type="arrow-down-b"></icon>
                                            </a>
                                            <dropdown-menu slot="list">
                                                <dropdown-item>驴打滚</dropdown-item>
                                                <dropdown-item>炸酱面</dropdown-item>
                                                <dropdown-item disabled>豆汁儿</dropdown-item>
                                                <dropdown-item>冰糖葫芦</dropdown-item>
                                                <dropdown-item divided>北京烤鸭</dropdown-item>
                                            </dropdown-menu>
                                        </dropdown>
                                </div>
                            )
                            }
                        }
                    },
                ],
                data6: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ],
                buttonName:"我是btn名字",
                htmlCode:`
                    <Table border :columns="columns7" :data="data6"></Table>
                `
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            test: function (){
                alert("test");
            }
        }
    }
</script>
<style lang="scss">
    .demo-page-basic-jsxDemo{

    }
</style>
